<template>
  <div class="index">
    <heads title="订单详情" :LeftArrow="true"></heads>
    <div class="main-content">
      <!--  -->
      <van-cell-group>
        <van-cell title="订单编号" :value="detail.order_num" />
        <van-cell title="下单时间" :value="detail.created_at" />
      </van-cell-group>

      <!-- end -->
      <van-cell-group>
        <van-cell>
          <template #default>
            <div class="flex space-between item-adress">
              <div class="item-adress-left">
                <h1>{{ detail.user.name }}</h1>
                <p>{{ detail.user.address }}</p>
              </div>
              <div class="color-primary" @click="goMap">导航</div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group class="item-contact" v-if="detail.order_status !== 1">
        <van-cell>
          <template #title>
            <div class="flex flex-start">
              联系电话
              <span>{{ detail.user.phone }}</span>
            </div>
          </template>
          <template #default>
            <a :href="`tel:${ detail.user.phone }`" class="color-primary">拨打电话</a>
          </template>
        </van-cell>
      </van-cell-group>

      <!--  -->
      <van-cell-group class="item-other">
        <van-cell title="回收类别" :value="detail.user.type" />
        <!-- <van-cell title="期望上门时间" :value="detail.time" /> -->
        <van-cell title="备注" :value="detail.user.remark" />
      </van-cell-group>

      <!-- end -->

      <!-- 订单信息-已完成 -->
      <van-cell-group v-if="detail.event.length > 0">
        <van-cell value>
          <template #default>
            <h1 class="cell-title flex space-between">
              <span class="flex">
                订单信息
                <i>({{ detail.order_num }})</i>
              </span>
              <span
                v-if="detail.order_status === 4 && roles !== 'platform'"
                class="color-primary"
                @click="goReview"
              >评论该订单</span>
            </h1>
          </template>
        </van-cell>
        <van-cell v-for=" (item,index) in detail.event" :key="index">
          <template #default>
            <div class="item flex order-progress flex-start">
              <span class="key">{{ item.time }}</span>
              <span class="value">{{ item.event }}</span>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- end -->

      <!-- 已完成 -->
      <div class="btn-box" v-if="detail.order_status === 2 && roles === 'courier'">
        <van-button type="info" class="btn-common" @click="finishOrder">已完成该订单</van-button>
      </div>
      <!--  -->

      <!-- end 默认 -->
      <div
        class="footer-bar flex space-between"
        v-if="roles === 'courier' && detail.order_status === 1"
      >
        <div class="foot-left">
          <h1>
            预估
            <!-- <span class="red">￥{{ detail.price }}</span> -->
          </h1>
          <p>最终费用以实际为准</p>
        </div>
        <div class="btn-order" @click="goOrder">抢单</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog, Toast } from "vant";
import { mapState } from 'vuex'

// 全局注册
Vue.use(Dialog, Toast);
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      detail: {}
    };
  },
  watch: {
    "$route.params.id": {
      handler(newVal, oldVal) {
        this.getDetail();
      },
      immediate: true
    }
  },
      computed:{
    ...mapState(['roles'])

  },

  methods: {
    // 数据
    getDetail() {
      let _this = this;
      this.isLoading = true;
      this.$ajax
        .post(`${this.$baseUrl}/user/orderInfo`, { id: this.$route.params.id })
        .then(function(res) {
          if (res.data.code == 200) {
            _this.detail = res.data.data;
            _this.isLoading = false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //导航
    goMap() {
                  //  window.location.href = 'https://apis.map.qq.com/uri/v1/routeplan?type=bus&to=' + this.detail.user.address + '&policy=1&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'

             window.location.href = `http://m.amap.com/search/mapview/keywords=${ this.detail.user.address }`

    },
    //抢单
    goOrder() {
      this.$ajax
        .post(`${this.$baseUrl}/sender/getOrder`, { id: this.$route.params.id })
        .then(function(res) {
          if (res.data.code == 200) {
            this.$router.push({ path: "/userCenter", query: {} });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //完成订单（快递员）
    finishOrder() {
      Dialog.confirm({
        title: "提示",
        message: "确认完成该订单吗?"
      })
        .then(() => {
          // on confirm
          this.$ajax
            .post(`${this.$baseUrl}/sender/alreadyOrder`, {
              id: this.$route.params.id
            })
            .then(function(res) {
              if (res.data.code == 200) {
                Toast("已完成该订单");
                setTimeout(() => {
                  this.$router.push({ path: "/gladOrderList" });
                }, 2000);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  created() {
   
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.main-content {
  padding: 0.3rem;
  box-sizing: border-box;
  font-size: 0.28rem;
  margin-top: 0;
  padding-bottom: 1.3rem;
  /deep/ .van-cell-group {
    margin-bottom: 0.3rem;
    border-radius: 0.1rem;
    .cell-title {
      font-size: 0.3rem;
      padding: 0.1rem 0;
      i {
        font-size: 0.24rem;
        color: #999;
        padding-left: 0.3rem;
      }
    }
    .van-cell__value {
      flex: 2;
    }
    &.item-contact {
      .van-cell__title {
        flex: 1.2;
        span {
          padding-left: 0.3rem;
        }
      }
      .van-cell__value {
        flex: 1;
      }
    }
    &.item-other {
      .van-cell__value {
        span {
          color: #333;
        }
      }
    }
    .van-cell {
      color: #999;
      background: transparent;
      font-size: 0.3rem;
      .van-cell__title {
        text-align: left;
        justify-content: flex-start;
      }
      .item-adress {
        font-size: 0.3rem;
        color: inherit;
        .item-adress-left {
          flex: 1;
          margin-right: 0.3rem;
          border-right: 1px solid #d8d8d8;
        }
        h1,
        p {
          font-size: inherit;
          color: #999;
        }
      }
      .item {
        font-size: 0.3rem;
        color: #999;
        justify-content: flex-start;
        &.order-progress {
          .key {
            width: 100px;
          }
        }
        .key {
          // width: 50px;
        }
        .value {
          flex: 1;
        }
      }
    }
  }

  .footer-bar {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.1rem 0.3rem;
    box-sizing: border-box;
    z-index: 10;
    .foot-left {
      color: #999;
      text-align: left;
      h1 {
        font-size: inherit;
        color: #333;
        .red {
          color: #dd0909;
        }
      }
    }
    .btn-order {
      background: #dd0909;
      color: #fff;
      border-radius: 0.44rem;
      min-width: 3.04rem;
      line-height: 0.8rem;
      font-size: 0.34rem;
    }
  }
  .btn-box {
    padding-top: 2rem;
    button {
      border-radius: 0.88rem;
      background: #34ad2a;
      border-color: #34ad2a;
    }
  }
}
</style>
  